import './style.css';
import * as THREE from 'three';

// 1、创建场景
const sence = new THREE.Scene();

//2、创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
);

//3、创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 设置尺寸
document.body.appendChild(renderer.domElement); // 将渲染器添加到dom

// 4、创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
const cube = new THREE.Mesh(geometry, material); // 网格

// 5、将网格添加到场景
sence.add(cube);

// 6、设置相机位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);

//7、渲染函数实现动画效果
function animate() {
  requestAnimationFrame(animate); // 调用请求动画帧，不断请求下一帧
  // 旋转动画
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染
  renderer.render(sence, camera); // 渲染时需要场景和相机
}
animate();
